<template>
	<view class="category">
		<!-- 搜索 -->
		<SearchLink></SearchLink>
		<view class="content" v-if="categoriesList[activeIndex]">
			<!-- 左侧导航栏 -->
			<view class="left">
				<!-- 一级分类 -->
				<view class="cate1" :class="{active: activeIndex === index}" v-for="(item, index) in categoriesList" :key="index" @click="showActive(index)">{{item.cat_name}}</view>
			</view>
			<!-- 右侧导航 -->
			<view class="right">
				<image src="/static/images/titleImage.png"></image>
				<!-- 二级标题 -->
				<view class="cate2" v-for="(catitem, catindex) in categoriesList[activeIndex].children" :key="catindex">
					<view class="title">
				    /<text>{{catitem.cat_name}}</text>/		
					</view>
				  <!-- 三级标题 -->
				  <view class="cate3">
				  	<view class="item" v-for="(thirditem, thirdindex) in catitem.children" :key="thirdindex" @click="toSearchList(thirditem.cat_name)">
				  		<image :src="thirditem.cat_icon"></image>
				  		<text>{{thirditem.cat_name}}</text>
				  	</view>
				  </view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import SearchLink from '@/components/SearchLink.vue'
	
	export default{
		components: {
			SearchLink
		},
		data () {
			return {
				// 被选中的下表
				activeIndex: 0,
				// 保存数据
				categoriesList: []
			}
		},
		methods: {
			showActive (index) {
				this.activeIndex = index
			},
			async getCategories () {
				let res = await this.$request({
					url: '/api/public/v1/categories'
				})
				// console.log(res)
				this.categoriesList = res
			},
			// 跳转至搜索列表
			toSearchList (catName) {
				uni.navigateTo({
					url: '/pages/search_list/search_list?catName=' + catName
				})
			}
		},
		onLoad () {
			this.getCategories()
		}
	}
</script>
<style lang="less">
	.category{
		.content{
			display: flex;
			position: absolute;
			top: 100rpx;
			bottom: 0;
			left: 0;
			right: 0;
		}
		
		.left{
			width: 198rpx;
			overflow: auto;
			
			.cate1{
				box-sizing: border-box;
				height: 100rpx;
				background-color: #f4f4f4;
				color: #333;
				text-align: center;
				line-height: 100rpx;
			  border-bottom: 2rpx solid #eee;
			}
			.active{
				color: #eb4450;
				font-weight: 700;
				background-color: #fff;
				position: relative;
				&::before{
					position: absolute;
					content: '';
					width: 8rpx;
					height: 60rpx;
					background-color: #eb4450;
					top: 20rpx;
					left: 0;
				}
			}
		}
		.right{
			flex: 1;
			box-sizing: border-box;
			padding: 20rpx 16rpx 0;
			overflow: auto;
			
			image{
				width: 520rpx;
				height: 180rpx;
				
			}
			
			.title{
				margin-top: 20rpx;
				height: 110rpx;
				line-height: 110rpx;
				text-align: center;
				color: #e0e0e0;
				>text{
					margin: 0 30rpx;
					color: #000;
				}
			}
			
			.cate3{
				display: flex;
				flex-wrap: wrap;
				color: #000;
			}
			
			.item{
				display: flex;
				flex-direction: column;
				width: 33.33%;
				align-items: center;
				justify-content: space-around;
				margin-top: 20rpx;
				
				image{
					width: 120rpx;
					height: 120rpx;
				}
				
				text{
					font-size: 28rpx;
				}
			}
		}
	}
</style>